<template>
  <div class="app-container  bg-gray">
    <el-tabs id="site" type="border-card" class="box-1">
      <el-tab-pane label="基础配置">
        <el-form ref="baseForm" :model="baseForm" :rules="baseFormRules" label-width="160px">
          <el-form-item label="站点名称" prop="name">
            <el-input v-model="baseForm['title']" />
          </el-form-item>
          <el-form-item label="系统运行状态" prop="seo_title">
            <el-switch
              :disabled="isReadOnly"
              v-model="baseForm['site_status']"
              active-text="正常"
              inactive-text="停站"/>
            <el-alert
              :closable="false"
              title="停站状态下除root账号外，其他账号无法登录。"
              type="info"/>
          </el-form-item>
          <el-form-item label="网页标题" prop="seo_title">
            <el-input v-model="baseForm['seo_title']" />
          </el-form-item>
          <el-form-item label="网页ico图标">
            <ws-upload-single-img v-model="baseForm['seo_ico']"
                                  :path="baseForm['seo_ico']"
                                  width="80" height="80"/>
          </el-form-item>
          <el-form-item label="快捷链接">
            <el-radio-group v-model="baseForm['shortcut']">
              <el-radio :label="1">开启</el-radio>
              <el-radio :label="0">关闭</el-radio>
            </el-radio-group>
            <el-input :disabled="!baseForm['shortcut']" v-model="baseForm['shortcut_name']" >
              <template slot="prepend">名称:</template>
            </el-input>
            <el-input :disabled="!baseForm['shortcut']" v-model="baseForm['shortcut_url']" >
              <template slot="prepend">地址:</template>
            </el-input>
          </el-form-item>
          <el-form-item label="强制用户上传头像">
            <el-radio-group v-model="baseForm['avatar_status']">
              <el-radio :label="1">开启</el-radio>
              <el-radio :label="0">关闭</el-radio>
            </el-radio-group>
            <el-alert
              :closable="false"
              title="选择开启的话, 用户必须上传头像后才能正常使用系统"
              type="info"/>
          </el-form-item>
          <el-form-item v-if="isReadOnly">
            <div>此站点为测试站点,测试用户无法进行修改</div>
          </el-form-item>
          <div v-else style="text-align:center">
            <el-button type="primary" class="bg-green" @click="submitForm('baseForm')">提交</el-button>
          </div>
        </el-form>
      </el-tab-pane>
      <el-tab-pane v-if="queryMatch(182)" label="小程序">
        <el-form ref="agentWxAppForm" :model="agentWxAppForm" :rules="agentWxAppFormRules" label-width="180px">
          <el-form-item label="小程序名称" prop="name">
            <el-input v-model="agentWxAppForm['wxapplet_name']" />
          </el-form-item>
          <el-form-item label="小程序图标" prop="logo">
            <ws-upload-single-img v-model="agentWxAppForm['member_wechat_icon_id']"
                                  :path="agentWxAppForm['member_wechat_icon_url']"
                                  width="80" height="80"/>
          </el-form-item>
          <el-form-item label="微信开放平台">
            <el-button size="small" type="primary" @click="loadAuthImage">授权第三方</el-button>
          </el-form-item>
          <el-form-item label="小程序AppId" prop="member_wechat_appid">
            <el-input v-if="!isReadOnly" v-model="agentWxAppForm['member_wechat_appid']" />
            <el-input v-else value="**************" readonly/>
            <el-alert :closable="false" type="info">
              <el-link :underline="false" type="primary" style="font-size: 12px;" @click="imageDialogVisible=true;imageDialogUrl=memberWechatImage">如何获取？</el-link>
            </el-alert>
          </el-form-item>
          <el-form-item label="小程序Secret" prop="member_wechat_secret">
            <el-input v-if="!isReadOnly" v-model="agentWxAppForm['member_wechat_secret']" />
            <el-input v-else value="**************" readonly/>
            <el-alert :closable="false" type="info">
              <el-link :underline="false" type="primary" style="font-size: 12px;" @click="imageDialogVisible=true;imageDialogUrl=memberWechatImage">如何获取？</el-link>
            </el-alert>
          </el-form-item>
          <el-form-item label="微信支付商户号">
            <el-input v-model="agentWxAppForm['qy_mch_id']" />
          </el-form-item>
          <el-form-item label="微信支付Api密钥">
            <el-input v-model="agentWxAppForm['qy_mch_key']" />
          </el-form-item>
          <el-form-item label="微信支付apiclient_cert.pem">
            <el-input v-model="agentWxAppForm['member_apiclient_cert']" :rows="4" type="textarea" />
          </el-form-item>
          <el-form-item label="微信支付apiclient_key.pem">
            <el-input v-model="agentWxAppForm['member_apiclient_key']" :rows="4" type="textarea" />
          </el-form-item>
          <el-form-item label="小程序上传密钥" prop="wx_mini_upload_key">
            <el-input v-model="agentWxAppForm['wx_mini_upload_key']" :rows="4" type="textarea"/>
            <el-alert :closable="false" type="info">
              <el-link :underline="false" type="primary" style="font-size: 12px;" @click="imageDialogVisible=true;imageDialogUrl=memberWechatImage">如何获取？</el-link>
            </el-alert>
            <el-alert :closable="false" :title="`请将IP（${agentWxAppForm['uploadIp']}）添加到微信公众平台后台“开发-开发设置-小程序代码上传”中；`" type="info"/>
          </el-form-item>
          <el-form-item label="小程序服务商关联票据">
            <el-input v-model="agentWxAppForm['wx_service_provider_ticket']" :rows="2" type="textarea"/>
            <el-alert :closable="false" type="info">
              非必填，若要关联小程序服务商请根据操作说明获取票据，<el-link :underline="false" href="https://developers.weixin.qq.com/doc/oplatform/Third-party_Platforms/Before_Develop/customized_service_platform_guidelines.html" type="primary" style="font-size: 12px;">票据获取说明</el-link>
            </el-alert>
          </el-form-item>
          <el-form-item v-if="isReadOnly">
            <div>此站点为测试站点,测试用户无法进行修改</div>
          </el-form-item>
          <div v-else style="text-align:center">
            <el-button type="primary" class="bg-green" @click="submitForm('agentWxAppForm')">提交</el-button>
          </div>
        </el-form>
      </el-tab-pane>
      <el-tab-pane v-if="queryMatch(216)" label="企业微信">
        <el-form ref="qywxForm" :model="qywxForm" :rules="qywxFormRules" label-width="180px">
          <el-form-item label="企业微信(企业ID)">
            <el-input v-model="qywxForm['company_id']" />
          </el-form-item>
          <el-form-item label="企业微信登录">
            <el-radio-group v-model="qywxForm['qywxLogin']">
              <el-radio :label="1">开启</el-radio>
              <el-radio :label="0">关闭</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="企业微信应用(AgentId)">
            <el-input v-model="qywxForm['qy_agentId']" />
          </el-form-item>
          <el-form-item label="企业微信应用秘钥">
            <el-input v-model="qywxForm['qy_agentSecret']" />
          </el-form-item>
          <el-form-item label="通讯录秘钥 ">
            <el-input v-model="qywxForm['tongxl_secret']	" />
          </el-form-item>
          <el-form-item label="打卡记录秘钥">
            <el-input v-model="qywxForm['punch_secret']" />
          </el-form-item>
          <el-divider/>
          <el-form-item label="企业微信小程序秘钥" prop="qy_wxSecret">
            <el-input v-model="qywxForm['qy_wxSecret']" />
            <el-alert :closable="false" type="info">
              <el-link :underline="false" type="primary" style="font-size: 12px;" @click="imageDialogVisible=true;imageDialogUrl=qywxSecretImage">如何获取？</el-link>
            </el-alert>
          </el-form-item>
          <el-form-item label="企业微信支付密钥">
            <el-input v-model="qywxForm['qy_pay_secret']" />
          </el-form-item>
          <el-form-item v-if="isReadOnly">
            <div>此站点为测试站点,测试用户无法进行修改</div>
          </el-form-item>
          <div v-else style="text-align:center">
            <el-button type="primary" class="bg-green" @click="submitForm('qywxForm')">提交</el-button>
          </div>
        </el-form>
      </el-tab-pane>
      <el-tab-pane v-if="queryMatch(217)" label="奖金设置">
        <el-form ref="bonusForm" :model="bonusForm" :rules="bonusFormRules" label-width="180px">
          <el-form-item label="当月提现最高百分比">
            <el-input v-model="bonusForm['bonus_month_proportion']">
              <template slot="append">%</template>
            </el-input>
          </el-form-item>
          <el-form-item label="单笔提现最高百分比">
            <el-input v-model="bonusForm['bonus_proportion']">
              <template slot="append">%</template>
            </el-input>
          </el-form-item>
          <el-form-item label="单笔最高提现金额">
            <el-input v-model="bonusForm['bonus_alone']"/>
          </el-form-item>
          <el-form-item label="最少提现">
            <el-input v-model="bonusForm['bonus_small']"/>
          </el-form-item>
          <el-form-item label="每日提现次数">
            <el-input v-model="bonusForm['bonus_today_second']"/>
          </el-form-item>
          <el-form-item label="每月提现次数">
            <el-input v-model="bonusForm['bonus_month_second']"/>
          </el-form-item>
          <el-form-item label="规则说明">
            <el-input v-model="bonusForm['bonus_explain']" :rows="3" type="textarea"/>
          </el-form-item>
          <el-form-item v-if="isReadOnly">
            <div>此站点为测试站点,测试用户无法进行修改</div>
          </el-form-item>
          <div v-else style="text-align:center">
            <el-button type="primary" class="bg-green" @click="submitForm('bonusForm')">提交</el-button>
          </div>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="用户协议">
        <el-form ref="userAgreementForm" :model="userAgreementForm" label-width="180px">
          <el-form-item label="用户协议名称" prop="name">
            <el-input v-model="userAgreementForm['agreementTitle']"/>
          </el-form-item>
          <el-form-item label="编辑" prop="content">
            <ws-editor v-model="userAgreementForm['agreementContent']"/>
          </el-form-item>
          <div style="text-align:center">
            <el-button type="primary" class="bg-green" @click="submitForm('userAgreementForm')">提交</el-button>
          </div>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="隐私协议">
        <el-form ref="privacyAgreementForm" :model="privacyAgreementForm" label-width="180px">
          <el-form-item label="隐私协议名称" prop="name">
            <el-input v-model="privacyAgreementForm['privacyTitle']"/>
          </el-form-item>
          <el-form-item label="编辑" prop="content">
            <ws-editor v-model="privacyAgreementForm['privacyContent']"/>
          </el-form-item>
          <div style="text-align:center">
            <el-button type="primary" class="bg-green" @click="submitForm('privacyAgreementForm')">提交</el-button>
          </div>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="短信配置">
        <el-form ref="smsForm" :model="smsForm" label-width="180px">
          <el-form-item label="短信AppID">
            <el-input v-model="smsForm['sms_appid']"/>
          </el-form-item>
          <el-form-item label="短信密钥">
            <el-input v-model="smsForm['sms_appkey']"/>
          </el-form-item>
          <el-form-item label="短信签名">
            <el-input v-model="smsForm['sms_sign']"/>
          </el-form-item>
          <el-form-item label="验证码模板ID">
            <el-input v-model="smsForm['code_template']"/>
          </el-form-item>
          <div style="text-align:center">
            <el-button type="primary" class="bg-green" @click="submitForm('smsForm')">提交</el-button>
          </div>
        </el-form>
      </el-tab-pane>
    </el-tabs>
    <el-dialog :visible.sync="authCodeDialogVisible" :modal-append-to-body="false" width="392px">
      <div class="iframe">
        <div class="iframe-content">
          <iframe ref="authIframe" :src="authImage" frameborder="0" @load="listenerAuthIframe"/>
        </div>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="imageDialogVisible" width="800px">
      <el-image :src="imageDialogUrl" :preview-src-list="[imageDialogUrl]" style="width: 100%;"/>
    </el-dialog>
  </div>
</template>

<script>
import { encryptionString } from '@/utils/validate';
export default {
  data() {
    return {
      // 是否开源站点只读
      isReadOnly: false,
      searchValue: '',

      ImageUrl: '',

      imageDialogVisible: false,
      imageDialogUrl: '',
      qywxSecretImage: require('@/images/qywxSecretImage.jpg'),
      memberWechatImage: require('@/images/memberWechatHelp.png'),

      // 基础配置
      baseForm: { site_status: true, shortcut: '0', avatar_status: 0 },
      baseFormRules: { title: [{ required: true, message: '请输入站点名称', trigger: 'blur' }] },
      // 企业微信
      qywxForm: { qywxLogin: 0},
      qywxFormRules: {},
      // 客户小程序
      agentWxAppForm: {},
      agentWxAppFormRules: {
        member_wechat_appid: [{ required: true, message: '小程序Appid不能为空', trigger: 'blur' }],
        member_wechat_secret: [{ required: true, message: '小程序密钥不能为空', trigger: 'blur' }],
        wx_mini_upload_key: [{ required: true, message: '小程序上传密钥不能为空', trigger: 'blur' }]
      },
      // 奖金设置
      bonusForm: {},
      bonusFormRules: {},
      // 用户协议
      userAgreementForm: {},
      userAgreementFormRules: {
        agreementTitle: [{ required: true, message: '请输入用户协议名称', trigger: 'blur' }],
        agreementContent: [{ required: true, message: '请输入用户协议内容', trigger: 'blur' }]
      },
      // 隐私协议
      privacyAgreementForm: {},
      privacyAgreementFormRules: {
        privacyTitle: [{ required: true, message: '请输入隐私协议名称', trigger: 'blur' }],
        privacyContent: [{ required: true, message: '请输入隐私协议内容', trigger: 'blur' }]
      },
      smsForm: {},
      authCodeDialogVisible: false,
      authImage: ''
    }
  },
  created() {
    this.getSiteConfig();
  },
  methods: { encryptionString,
    /**
     *  获取站点数据
     *  接口:'siteconfig/list'
     */
    getSiteConfig() {
      const url = 'siteconfig/list';
      this.$store.dispatch('GetConnect', { url }).then(res => {
        this.id = res.data.id;
        this.baseForm = res.data['basic'];
        this.baseForm.site_status = this.baseForm.site_status === 1;
        this.qywxForm = res.data['qy']
        this.agentWxAppForm = res.data['agentWxAppForm'];
        this.bonusForm = res.data['bonusLimit'];
        this.userAgreementForm = res.data['agreement'];
        this.privacyAgreementForm = res.data['privacy'];
        this.smsForm = res.data['sms']
      }).catch(e => {
        this.$message.error(e.msg + ',请刷新或联系管理员');
      })
    },
    /**
     * 表单提交
     * 添加客户
     */
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const url = 'siteconfig/update';
          let data = {};
          if (formName === 'baseForm') {
            Object.assign(data, this.baseForm);
            data.type = 'basic';
            data.site_status = data.site_status ? 1 : 0;
          } else if (formName === 'qywxForm') {
            data = this.qywxForm;
            Object.assign(data, this.qywxForm);
            data.type = 'qy';
          } else if (formName === 'agentWxAppForm') {
            data = this.agentWxAppForm;
            data.type = 'agentWxAppForm';
          } else if (formName === 'bonusForm') {
            data = this.bonusForm;
            data.type = 'bonusLimit';
          } else if (formName === 'userAgreementForm') {
            data = this.userAgreementForm;
            data.type = 'agreement';
          } else if (formName === 'privacyAgreementForm') {
            data = this.privacyAgreementForm;
            data.type = 'privacy';
          } else if (formName === 'smsForm') {
            data = this.smsForm;
            data.type = 'sms';
          }
          this.$store.dispatch('GetConnect', { url, data }).then(res => {
            this.$message.success(res.msg);
            this.getSiteConfig();
          }).catch(e => {
            this.$message.error(e.msg);
          })
        } else {
          this.$message.error('提交失败,请检查必填项');
        }
      })
    },
    // 获取授权二维码
    loadAuthImage() {
      const url = 'wxOpen/getAuthorizationUrl';
      const data = { url: '/videoBlogger/config' };
      this.$store.dispatch('GetConnect', { url, data }).then(res => {
        this.authCodeDialogVisible = true;
        this.authImage = res.data['authUrl'];
        this.isLoadAuthIframe = false;
      }).catch(e => {
        this.$message.error(e.msg)
      })
    },
    // 监听授权iframe跳转
    listenerAuthIframe() {
      const iframe = this.$refs.authIframe;
      if (this.$validate.isEmpty(iframe)) {
        return;
      }
      if (!this.isLoadAuthIframe) {
        this.isLoadAuthIframe = true;
        return;
      }
      window.location.reload();
    }
  }
}
</script>

<style lang="scss" type="text/scss" scoped>
@import '../../styles/index.scss';
.box-1 {
  /*max-width: 1000px;*/
  margin: 0 auto;
  .el-form {
    max-width: 900px;
    .el-alert{
      padding: 0 5px;
    }
  }
}

.dialog {
  .el-input {
    width: 80%;
  }
}
.iframe {
  display: block;
  width: 352px;
  height: 413px;
  border: 1px solid #666666;
  border-radius: 5px;
  overflow: hidden;

  .iframe-content {
    width: 100%;
    height: 413px;
    overflow: hidden;
    position: relative;

    iframe {
      width: 1350px;
      height: 1000px;
      position: absolute;
      left: -500px;
      top: -80px;
    }
  }
}
</style>

<style>
  #site .el-tabs__nav-wrap {
    background-color: #304156;
  }
</style>
